<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="layouts/default">
<head>
    <title>FundRequest - Requests</title>
</head>

<th:block layout:fragment="content">
    <section class="section section--header mb-5">
        <div class="media">
            <div class="d-none d-md-flex header-image">
                <i class="fa fa-list fa-10x text-secondary"></i>
            </div>
            <div class="media-body">
                <h1 class="page-title">
                    <span class="d-inline-block d-md-none">
                        <i class="fa fa-list fa-1x text-secondary"></i>
                    </span>
                    Browse all requests
                </h1>
                <p class="page-description">
                    The best way to deep dive into all requests.
                    Filter on technology or on a specific project so you can find the perfect request that fits your
                    needs.
                </p>

                <div class="d-flex justify-content-between">
                    <a class="btn btn-link text-secondary" th:href="@{'#faq'}">
                        How it works...
                    </a>
                    <a class="btn btn-secondary" th:href="@{/fund/github}">
                        Start new
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section class="mb-5">
		<request-list th:attr="'v-bind:requests'=${requests},
                'v-bind:projects'=${projects},
                'v-bind:technologies'=${technologies},
				'v-bind:is-authenticated'=${isAuthenticated},
                'v-bind:filters'='[
                    { value: &quot;open&quot;, count: '+${requestsPerPhaseCount['OPEN']}+', title: &quot;Open&quot;, description: &quot;Showing an overview of all open requests.&quot; },
                    { value: &quot;resolved&quot;, count: '+${requestsPerPhaseCount['RESOLVED']}+', title: &quot;Resolved&quot;, description: &quot;Showing an overview of all resolved requests.&quot; },
                    { value: &quot;closed&quot;, count: '+${requestsPerPhaseCount['CLOSED']}+', title: &quot;Closed&quot;, description: &quot;Showing an overview of all closed requests.&quot; },
                 ]' "
                      :phase-filter-default="'open'"
        >
            <template slot-scope="{phaseFilter}">
                <div class="card mb-5" v-if="phaseFilter === 'open'">
                    <div class="card-body">
                        <div class="row request-list__statistics">
                            <div class="col-12 col-md-4 request-list__statistic">
                                <div class="request-list__statistic-title">Total funding</div>
                                <div class="request-list__statistic-value">
                                    <span>$</span><span
                                        th:text="${#numbers.formatDecimal(statistics.totalAvailableFunding,1,'COMMA',2,'POINT')}">2873</span>
                                    <span class="disclaimer-asterix">*</span>
                                </div>
                            </div>
                            <div class="col-12 col-md-4 request-list__statistic">
                                <div class="request-list__statistic-title">Most funded project</div>
                                <div class="request-list__statistic-value">
                                    <span th:text="${statistics.mostFundedProject}">xyz</span>
                                </div>
                            </div>
                            <div class="col-12 col-md-4 request-list__statistic">
                                <div class="request-list__statistic-title">Most funded technology</div>
                                <div class="request-list__statistic-value">
                                    <span th:text="${statistics.mostFundedTechnology}">Java</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </request-list>
    </section>

    <section class="mb-2" id="faq" ref="faq">
        <faq v-bind:location="'/rest/faq/requests'"></faq>
    </section>

    <div th:replace="fragments/modals/fund :: default('fund-request')"></div>

</th:block>


<th:block layout:fragment="css">
</th:block>
<th:block layout:fragment="scripts">
</th:block>

</html>
